<!DOCTYPE html>
<html>
<head>
    <title>聊天室</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .logout {
            position: absolute;
            right: 10px;
            top: 10px;
            color: white;
            text-decoration: none;
        }
        .chat-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 10px;
        }
        .messages {
            flex: 1;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 3px;
        }
        .message {
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 3px;
        }
        .message.system {
            background-color: #f0f0f0;
            text-align: center;
        }
        .message.user {
            background-color: #e6f7ff;
        }
        .message .user {
            font-weight: bold;
        }
        .message .timestamp {
            font-size: 0.8em;
            color: #888;
            margin-left: 10px;
        }
        .input-area {
            display: flex;
        }
        .input-area input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .input-area button {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            margin-left: 5px;
            cursor: pointer;
        }
        .input-area button:hover {
            background-color: #45a049;
        }
    </style>
    <script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
</head>
<body>
<div class="header">
    <h1>聊天室</h1>
    <a href="/logout" class="logout">退出</a>
</div>
<div class="chat-container">
    <div class="messages" id="messages"></div>
    <div class="input-area">
        <input type="text" id="message-input" placeholder="输入消息...">
        <button id="send-button">发言</button>
    </div>
</div>

<script>
    var socket = io.connect();
    var messageInput = document.getElementById('message-input');
    var sendButton = document.getElementById('send-button');
    var messagesDiv = document.getElementById('messages');

    // 发送消息
    function sendMessage() {
        var message = messageInput.value.trim();
        if (message) {
            socket.emit('send_message', {message: message});
            messageInput.value = '';
        }
    }

    // 事件监听
    sendButton.addEventListener('click', sendMessage);
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    // 接收消息
    socket.on('message', function(data) {
        var messageDiv = document.createElement('div');
        messageDiv.className = 'message ' + (data.user === 'System' ? 'system' : 'user');

        var content = '';
        if (data.user !== 'System') {
            content += '<span class="user">' + data.user + '</span>';
            content += '<span class="timestamp">' + data.timestamp + '</span><br>';
        }
        content += data.content;

        messageDiv.innerHTML = content;
        messagesDiv.appendChild(messageDiv);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    });
</script>
</body>
</html>